<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>微信好友性别分布</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px; position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		
		
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
			title: {
				text: '微信好友性别分布图',
				subtext: 'posted by inspurer',
				left: 'center'
			},
			tooltip : {
				trigger: 'item',
				formatter: "<br/>{b} : {c} ({d}%)"
			},
			legend: {
				// orient: 'vertical',
				// top: 'middle',
				bottom: 10,
				left: 'center',
				data: ['未知', '男','女']
			},
			series : [
				{
					type: 'pie',
					radius : '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:[
                {value:74, name: '未知'},
                {value:129, name: '男'},
                {value:153, name: '女'},
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
        });
    </script>
</body>
</html>
